<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Simple AGS</title>
        <script type="text/javascript">
            function getURLParam(name) {
              var regexS = "[\\?&]" + name + "=([^&#]*)";
              var regex = new RegExp(regexS);
              var results = regex.exec(window.location.href);
              return (results === null ? "" : decodeURIComponent(results[1]));
            }
            var gmaps_v = getURLParam('v');
            if (gmaps_v) gmaps_v = '&v='+gmaps_v;
            var script = '<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false' + gmaps_v + '"></' + 'script>';
            document.write(script);
        </script>
            <script type="text/javascript" src="../src/arcgislink.js">
        </script>
        <script type="text/javascript" src="simpleags.js">
        </script>
    </head>
    <body>
      <div style="width:100%">
        This sample has the basic functions of a GIS application:
        <br/>
        1) A table of contents(TOC) to allow layers turn on/off, layers visiblity controled by map scale and reflected on TOC.
        <br/>
        2) Allow click on map to do spatial query, with options to choose layers.<hr/>
       </div>
       <div style="width:100%">
            Switch to a different map service:
            <select id="svc" onchange="loadMapService()">
                <option selected="selected">Specialty/ESRI_StateCityHighway_USA/MapServer</option>
                <option>Specialty/ESRI_StatesCitiesRivers_USA/MapServer</option>
                <option selected="selected">Demographics/ESRI_Census_USA/MapServer</option>
                <option>Louisville/LOJIC_LandRecords_Louisville/MapServer</option>
                <option>Louisville/LOJIC_PublicSafety_Louisville/MapServer</option>
                <option>Petroleum/KGS_OilGasFields_Kansas/MapServer</option>
            </select>
            Map Opacity(0=transparent;1=opaque):
            <select id="op" onchange="setOVOpacity(this.options[this.selectedIndex].text)">
                <option>0.2</option>
                <option>0.5</option>
                <option selected="selected">0.8</option>
                <option>1</option>
            </select>
        </div>
        <div id="svcDesc" style="border:1px solid red; width:100%">
        </div>

  <div style="width:100%">
     <div style="position:absolute;width:20%;left:0;overflow:auto; padding:5px">
                        <div id="svcInfo">
                        </div>
                        Note:Layers from cached service or Layers that are not visible in current zoom level are disabled.
                        <br/>
                        <div id="toc" style="border:1px solid gray">
                        </div>
                        Click anywhere on map to show data(on right side of map).
                        <br/>
                        Retrieve data for layer:
                        <div id="clickOptsDiv">
                        </div>
                    </div>
    <div id="map_canvas" style="position:absolute;width:78%;overflow:hidden;  height:400px; left:20%;border:1px; margin:5px; solid #000;">

                    </div>
                     <div id="working" style="width:150px;height:100px;visibility:hidden;position:absolute;top:250px;left:450px;background-color:yellow">
                    Working....
                    </div>
  </div>
     <!--   <table>
            <tr>
                <td valign="top">

                </td>
                <td>



                </td>

                <td valign="top" width="200">
                    Map data at clicked location:
                    <div id="info" style="border:1px solid gray; height:380px; overflow:auto">
                    </div>
                </td>

            </tr>
        </table> -->


    </body>
</html>
